<template>
  <div>
    <van-nav-bar
      class="nav"
      left-arrow
      @click-left="onClickLeft"
      title="我 的 订 单"
    >
      <template #right>
        <van-icon name="medal-o" size="30" />
      </template>
    </van-nav-bar>
    <!-- 订单列表 -->
    <div class="list">
      <Order1  @cbuy="buy(item.sum,item.orderId)" @cdel="del(item.orderId)" v-for="item in orders" :key="item.orderId" :order="item"></Order1>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from "vue";
import $http from "@/http";
import { useRoute, useRouter } from "vue-router";
import Order1 from "@/components/Order1.vue";
import { showSuccessToast, showFailToast } from "vant";
import order1 from "@/types/order1";
import { cellGroupProps } from "vant";
// import "vant/lib/index.css";

const route = useRoute();
const router = useRouter();
const orders: order1[] = reactive([]);
// 返回上一页
const onClickLeft = () => {
  history.back();
};

//加载订单列表
const loadList=()=>{
  $http.orderApi.queryAll().then((res) => {
    //console.log(res);
    orders.length = 0;
    orders.push(...res.data.data);
  });
}

onMounted(() => {
  loadList()
});

// 删除订单
const del=(id:number)=>{
  // console.log(id)
  $http.orderApi.del(id).then(res=>{
    //console.log(res)
    if(res.data.code==200){
      showSuccessToast('删除订单成功')
      loadList()
    }else{
      showFailToast('删除订单失败')
    }

  }).catch(err=>console.log(err))

}
// 支付
const buy=(sum:number,orderId:number)=>{
  //console.log(id)
  router.push(`/home/pay?sum=${sum}&orderId=${orderId}`)
}
</script>

<style lang="scss" scoped>
.nav{
  position: fixed;
  width: 100%;
}
.list{
  padding-top: 80px;
  padding-bottom: 60px;
}
</style>

<style lang="scss">
:root {
  --van-nav-bar-background: #07c160;
  --van-nav-bar-title-text-color: white;
  --van-nav-bar-height: 70px;
  --van-nav-bar-icon-color: red;
  --van-nav-bar-title-font-size: 24px;
  --van-nav-bar-z-index: 100;
}
</style>